﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    <style>
        .xzt {
            margin:100px auto;
            width: 58px;
            height: 58px;
            background-image: url("hover-ok.png");
            background-repeat: no-repeat;
        }
        .wz {
            margin:-70px auto;
            width: 300px;
            text-align: center;

        }
    </style>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div class="xzt"></div><!--旋转图-->
<div class="wz">动画练习</div>
<script>
    $(function () {
        var num = 0;


        var time1;
        var time2;

        $(".xzt").hover(function () {
            clearInterval(time2);
            time1 = setInterval(function () {
                if (num < 16) {
                    var num2 = -num * 58;
                    $('.xzt').css("background-position", num2 + "px" + " 50%");
                    num++;
                }
            }, 40);
        });

        $('.xzt').mouseout(function () {
            clearInterval(time1);
            time2 = setInterval(function () {
                if (num >= 0) {
                    var num2 = -num * 58;
                    $('.xzt').css("background-position", num2 + "px" + " 50%");
                    num--;
                }
            }, 40);

        });

    });
</script>
</body>
</html>